<template>
  <div class="resource-home">
    <!-- 标题栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">心理风险探测</div>
      <div></div>
    </div>

    <div class="container">
      <!-- 图片资源分类 -->
      <section class="category">
        <div class="directory-header" @click="toggleImageDirectory">
          <h2 class="category-title">
            <i class="icon-image"></i>
            图文
            <span class="directory-arrow" :class="{ expanded: imageExpanded }">
              <i class="fas fa-chevron-down"></i>
            </span>
          </h2>
          <div class="directory-title">心理知识卡片</div>
        </div>

        <div v-show="imageExpanded" class="resource-list">
          <div
            v-for="(image, index) in images"
            :key="index"
            class="resource-item"
            @click="goToImageDetail(image.url, image.title)"
          >
            <div class="resource-info">
              <h3 class="resource-title">{{ image.title }}</h3>
              <span class="resource-type image-type">图片</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 视频资源分类 -->
      <section class="category">
        <div class="directory-header" @click="toggleVideoDirectory">
          <h2 class="category-title">
            <i class="icon-video"></i>
            DRM科普视频
            <span class="directory-arrow" :class="{ expanded: videoExpanded }">
              <i class="fas fa-chevron-down"></i>
            </span>
          </h2>
          <div class="directory-title">第一期</div>
        </div>

        <div v-show="videoExpanded" class="resource-list">
          <div
            v-for="(video, index) in videos"
            :key="index"
            class="resource-item"
            @click="viewVideo(video.url, video.title)"
          >
            <div class="resource-preview video-preview">
              <video
                :poster="video.poster"
                :src="video.url"
                preload="metadata"
              ></video>
              <div class="play-icon"></div>
            </div>
            <div class="resource-info">
              <h3 class="resource-title">{{ video.title }}</h3>
              <span class="resource-type video-type">视频</span>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 视频详情页 -->
    <div v-if="currentVideo" class="detail-page">
      <div class="detail-content">
        <video :src="currentVideo.url" controls autoplay></video>
        <h3 class="detail-title">{{ currentVideo.title }}</h3>
        <button class="close-btn" @click="currentVideo = null">×</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResourceHome",
  data() {
    return {
      currentVideo: null,
      imageExpanded: false, // 控制图片目录展开状态
      videoExpanded: false, // 控制视频目录展开状态
      images: [
        {
          title: "危机事件处理节奏",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E5%8D%B1%E6%9C%BA%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E8%8A%82%E5%A5%8F%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
        },
        {
          title: "抑郁症判断标准",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E6%8A%91%E9%83%81%E7%97%87%E5%88%A4%E6%96%AD%E6%A0%87%E5%87%86%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87%20%281%29.png",
        },
        {
          title: "焦虑症识别",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E7%84%A6%E8%99%91%E7%97%87%E8%AF%86%E5%88%AB%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
        },
      ],
      videos: [
        {
          title: "双相情感障碍—情绪的过山车",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E5%8F%8C%E7%9B%B8%E6%83%85%E6%84%9F%E9%9A%9C%E7%A2%8D%E2%80%94%E6%83%85%E7%BB%AA%E7%9A%84%E8%BF%87%E5%B1%B1%E8%BD%A6.mp4",
          poster:
            "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/3.png",
        },
        {
          title: '抑郁症：被忽略的"心灵重感冒"',
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E6%8A%91%E9%83%81%E7%97%87%EF%BC%9A%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E2%80%9C%E5%BF%83%E7%81%B5%E9%87%8D%E6%84%9F%E5%86%92%E2%80%9D.mp4",
          poster:
            "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/5.png",
        },
        {
          title: "深夜危机——失眠与自杀意念的应对",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E6%B7%B1%E5%A4%9C%E5%8D%B1%E6%9C%BA%E2%80%94%E2%80%94%E5%A4%B1%E7%9C%A0%E4%B8%8E%E8%87%AA%E6%9D%80%E6%84%8F%E5%BF%B5%E7%9A%84%E5%BA%94%E5%AF%B9.mp4",
          poster:
            "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/2.png",
        },
        {
          title: '焦虑障碍：当"警报器"失灵时',
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E7%84%A6%E8%99%91%E9%9A%9C%E7%A2%8D%EF%BC%9A%E5%BD%93%E2%80%9C%E8%AD%A6%E6%8A%A5%E5%99%A8%E2%80%9D%E5%A4%B1%E7%81%B5%E6%97%B6.mp4",
          poster:
            "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/1.png",
        },
        {
          title: '药物基础知识——破除"妖魔化"认知',
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E6%8E%A2%E6%B5%8B/%E8%8D%AF%E7%89%A9%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E2%80%94%E2%80%94%E7%A0%B4%E9%99%A4%E2%80%9C%E5%A6%96%E9%AD%94%E5%8C%96%E2%80%9D%E8%AE%A4%E7%9F%A5.mp4",
          poster:
            "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/4.png",
        },
      ],
    };
  },
  methods: {
    // 跳转到图片详情页，携带图片地址参数
    goToImageDetail(url, title) {
      // 这里假设您的图片详情页路由为 '/image-detail'
      // 您可以根据实际路由配置进行调整
      this.$router.push({
        path: "/manager/zhishiku/imgmsg",
        query: {
          imgurl: url,
        },
      });
    },

    viewVideo(url, title) {
      this.currentVideo = { url, title };
    },

    // 切换图片目录展开状态
    toggleImageDirectory() {
      this.imageExpanded = !this.imageExpanded;
    },

    // 切换视频目录展开状态
    toggleVideoDirectory() {
      this.videoExpanded = !this.videoExpanded;
    },
  },
};
</script>

<style scoped>
/* 导航栏样式 */
.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.resource-home {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.category {
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.category-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-image,
.icon-video {
  margin-right: 10px;
  font-size: 1.3rem;
}

.icon-image::before {
  content: "🖼️";
}

.icon-video::before {
  content: "🎬";
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.resource-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.resource-preview {
  height: 160px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  position: relative;
}

.resource-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview {
  position: relative;
}

.video-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.play-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #3498db;
  margin-left: 4px;
}

.resource-info {
  padding: 15px;
}

.resource-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.image-type {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.video-type {
  background-color: #e3f2fd;
  color: #1565c0;
}

.detail-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.detail-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 5px;
}

.detail-content video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 5px;
}

.detail-title {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #2c3e50;
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #2c3e50;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 5px;
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 目录样式 */
.directory-header {
  cursor: pointer;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.directory-header:hover {
  background-color: #f5f7fa;
}

.directory-title {
  font-size: 1.1rem;
  color: #666;
  margin-top: 5px;
  padding-left: 30px;
}

.directory-arrow {
  transition: transform 0.3s ease;
  color: #666;
}

.directory-arrow.expanded {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .resource-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .category {
    padding: 15px;
  }
}
</style>
